import { useCharts, useTagCanvas } from '../use-charts';

export const bar = useCharts('bar', {
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    type: 'category',
    data: ['data1', 'data2', 'data3', 'data4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [15, 23, 24, 18],
      type: 'bar'
    },
    {
      data: [22, 12, 34, 27],
      type: 'bar'
    }
  ]
});

export const line = useCharts('line', {
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    type: 'category',
    data: ['data1', 'data2', 'data3', 'data4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [15, 23, 24, 18],
      type: 'line'
    },
    {
      data: [22, 12, 34, 27],
      type: 'line'
    }
  ]
});

export const pie = useCharts('line', {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [
        { value: 15, name: 'data1' },
        { value: 23, name: 'data2' },
        { value: 24, name: 'data3' },
        { value: 18, name: 'data4' }
      ]
    }
  ]
});

export const rose = useCharts('rose', {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      radius: ['10%', '80%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
});

export const scatter = useCharts('scatter', {
  xAxis: {
    scale: true
  },
  yAxis: {
    scale: true
  },
  series: [
    {
      type: 'effectScatter',
      symbolSize: 10,
      data: [
        [172.7, 105.2],
        [153.4, 42]
      ]
    },
    {
      type: 'scatter',
      symbolSize: 5,
      data: [
        [161.2, 51.6],
        [167.5, 59.0],
        [159.5, 49.2],
        [157.0, 63.0],
        [155.8, 53.6],
        [170.0, 59.0],
        [159.1, 47.6],
        [166.0, 69.8],
        [176.2, 66.8],
        [160.2, 75.2],
        [172.5, 55.2],
        [170.9, 54.2],
        [172.9, 62.5],
        [160.0, 50.0],
        [147.2, 49.8],
        [168.2, 49.2],
        [175.0, 73.2],
        [157.0, 47.8],
        [167.6, 68.8],
        [159.5, 50.6],
        [175.0, 82.5],
        [166.8, 57.2],
        [176.5, 87.8],
        [170.2, 72.8],
        [174.0, 54.5],
        [173.0, 59.8],
        [179.9, 67.3],
        [170.5, 67.8],
        [160.0, 47.0],
        [154.4, 46.2],
        [162.0, 55.0],
        [176.5, 83.0],
        [160.0, 54.4],
        [152.0, 45.8],
        [162.1, 53.6],
        [170.0, 73.2],
        [160.2, 52.1],
        [161.3, 67.9],
        [166.4, 56.6],
        [168.9, 62.3],
        [163.8, 58.5],
        [167.6, 54.5],
        [160.0, 50.2],
        [161.3, 60.3]
      ]
    }
  ]
});

export const wordcloud = useCharts('wordcloud', {
  tooltip: {
    show: true
  },
  series: [
    {
      type: 'wordCloud',
      sizeRange: [12, 24],
      rotationRange: [0, 0],
      gridSize: 15,
      textStyle: {
        color: function () {
          return (
            '#' +
            Math.floor(Math.random() * 0xffffff)
              .toString(16)
              .padEnd(6, '0')
          );
        }
      },
      data: [
        { value: 192, name: '@icon-park/vue-next' },
        { value: 84, name: 'comic-admin' },
        { value: 64, name: 'comicui' },
        { value: 118, name: 'vue3' },
        { value: 18, name: 'typescript' },
        { value: 25, name: 'vue3组件库' },
        { value: 205, name: 'vue' },
        { value: 125, name: 'javascript' },
        { value: 55, name: 'HTML' },
        { value: 58, name: 'CSS' },
        { value: 72, name: 'animate' }
      ]
    }
  ]
});

export const sunburst = useCharts('sunburst', {
  tooltip: {
    show: true
  },
  series: {
    type: 'sunburst',
    data: [
      {
        name: 'Grandpa',
        children: [
          {
            name: 'Uncle Leo',
            value: 15,
            children: [
              {
                name: 'Cousin Jack',
                value: 2
              },
              {
                name: 'Cousin Mary',
                value: 5,
                children: [
                  {
                    name: 'Jackson',
                    value: 2
                  }
                ]
              },
              {
                name: 'Cousin Ben',
                value: 4
              }
            ]
          },
          {
            name: 'Father',
            value: 10,
            children: [
              {
                name: 'Me',
                value: 5
              },
              {
                name: 'Brother Peter',
                value: 1
              }
            ]
          }
        ]
      },
      {
        name: 'Nancy',
        children: [
          {
            name: 'Uncle Nike',
            children: [
              {
                name: 'Cousin Betty',
                value: 1
              },
              {
                name: 'Cousin Jenny',
                value: 2
              }
            ]
          }
        ]
      }
    ],
    radius: ['10%', '90%'],
    itemStyle: {
      borderRadius: 4,
      borderWidth: 2
    },
    label: {
      show: false
    }
  }
});

export const funnel = useCharts('funnel', {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'funnel',
      left: '20%',
      width: '60%',
      label: {
        show: true,
        position: 'inside',
        color: '#fff'
      },
      data: [
        { value: 15, name: 'data1' },
        { value: 23, name: 'data2' },
        { value: 24, name: 'data3' },
        { value: 18, name: 'data4' }
      ]
    }
  ]
});

export const text = useCharts('text', {
  graphic: {
    elements: [
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: 'comic-admin',
          fontSize: 40,
          fontWeight: 'bold',
          lineDash: [0, 200],
          lineDashOffset: 0,
          fill: 'transparent',
          stroke: '#000000',
          lineWidth: 1
        },
        keyframeAnimation: {
          duration: 3000,
          loop: true, //循环
          keyframes: [
            {
              percent: 0.7,
              style: {
                fill: 'transparent',
                lineDashOffset: 200,
                lineDash: [200, 0]
              }
            },
            {
              percent: 0.8,
              style: {
                fill: 'transparent'
              }
            },
            {
              percent: 1,
              style: {
                fill: '#000000'
              }
            }
          ]
        }
      }
    ]
  }
});

export const tags = useTagCanvas('tags', [
  '@icon-park/vue-next',
  'comic-admin',
  'comicui',
  'vue3',
  'typescript',
  'vue3组件库'
]);
